<template>
  <div>
    <!-- header 表格头部展示信息 -->
    <div v-if="title !== ''" class="header">
      <h4>{{ title }}</h4>
      <slot name="handerHandler">
        <el-button size="mini" type="primary" v-if="isCreate"
          >新建{{ title.slice(0, 2) }}</el-button
        >
      </slot>
    </div>
    <el-table
      :data="listData"
      stripe
      style="width: 100%"
      border
      @selection-change="selectionChange"
      v-bind="childrenProps"
    >
      <el-table-column
        v-if="isShowSelectColumn"
        type="selection"
        width="55"
        align="center"
      />
      <el-table-column
        align="center"
        type="index"
        label="序号"
        width="70"
        v-if="isShowIndexColumn"
      ></el-table-column>

      <template v-for="p in propList" :key="p.prop">
        <el-table-column v-bind="p" align="center" show-overflow-tooltip>
          <template #default="scope">
            <slot :name="p.prop" :row="scope.row">{{ scope.row[p.prop] }}</slot>
          </template>
        </el-table-column>
      </template>
      <el-table-column v-if="isHandle" label="操作" width="150">
        <template #default="scope">
          <slot name="handle" :row="scope.row"></slot>
        </template>
      </el-table-column>
    </el-table>

    <!-- 底部分页区域 -->
    <div class="footer" v-if="isShowPagination">
      <el-pagination
        :page-sizes="[5, 10, 20, 40]"
        :page-size="page?.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="listCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from "vue"
export default defineComponent({
  props: {
    title: {
      type: String,
      default: "",
    },
    listData: {
      type: Array,
      required: false,
    },
    listCount: {
      type: Number,
      default: 0,
    },
    propList: {
      type: Array as PropType<any>,
      defalut: [],
    },
    isShowIndexColumn: {
      type: Boolean,
      default: false,
    },
    isShowSelectColumn: {
      type: Boolean,
      default: false,
    },
    isHandle: {
      type: Boolean,
      default: false,
    },
    page: {
      type: Object,
      default: () => ({ currentPage: 0, size: 10 }),
    },
    childrenProps: {
      type: Object,
      default: () => ({}),
    },
    isShowPagination: {
      type: Boolean,
      default: true,
    },
    isCreate: {
      type: Boolean,
      default: true,
    },
  },
  emits: ["update:page"],
  setup(props, { emit }) {
    const selectionChange = (selectOptions: any) => {
      console.log(selectOptions)
    }

    const handleSizeChange = (size: number) => {
      emit("update:page", { ...props.page, size })
      console.log({ ...props.page, size })
    }

    const handleCurrentChange = (currentPage: number) => {
      emit("update:page", { ...props.page, currentPage })
    }

    //

    return {
      selectionChange,
      handleCurrentChange,
      handleSizeChange,
    }
  },
})
</script>
<style lang="less" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}
.footer {
  margin-top: 10px;
}
</style>
